<!DOCTYPE html>
<html>

<head>
    <meta charset=" utf-8">
    <meta name="author" content="http://www.cxvn.com/" />
    <title>position: sticky是否脱离文档流</title>
    <style>
        .paper {
            position: relative;
            margin: auto;
            width: 50rem;
            height: 25rem;
            background-color: cornsilk;
        }

        /*clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 30% 100%);*/
        .spanbone {
            width: 3rem;
            height: 19em;
            position: absolute;
            top: 3em;
            left: 50%;
        }

        .boneclip {
            border-top: 19em solid transparent;
            border-left: 1rem solid cornsilk;
            border-right: 1rem solid cornsilk;
            border-bottom: none;
        }

        .text {
            position: absolute;
            background-color: transparent;
            writing-mode: vertical-rl;
            top: 0;
            left: 0;
            line-height: 3rem;
            padding-top: 1rem;
            font-size: 1.1rem;
        }

        .boneupper {
            position: absolute;
            width: 3rem;
            height: 10rem;
            top: 0rem;
            background-color: white;
            border-top: 0.2rem solid chocolate;
            border-bottom:0.2rem solid chocolate;
            clip-path: polygon(10% 0%, 90% 0%, 75% 100%, 25% 100%);
        }
        .woodstick{
            width: 100%;
            height:100%;
            background-color:chocolate;
            clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 30% 100%);
        }
        /*在root伪类中定义全局变量*/
        :root{
            --rotation-offset: 55deg;
        }
        .a{
            transform-origin: 50% 90%;
            transform:rotate(calc(0deg + var(--rotation-offset)));
        }
        .b{
            transform-origin: 50% 90%;
            transform:rotate(calc(-11deg + var(--rotation-offset)));}
        .c{
            transform-origin: 50% 90%;
            transform:rotate(calc(-22deg + var(--rotation-offset)));}
        .d{
            transform-origin: 50% 90%;
            transform:rotate(calc(-33deg + var(--rotation-offset)));}
        .e{
            transform-origin: 50% 90%;
            transform:rotate(calc(-44deg + var(--rotation-offset)));}
        .f{
            transform-origin: 50% 90%;
            transform:rotate(calc(-55deg + var(--rotation-offset)));}
        .g{
            transform-origin: 50% 90%;
            transform:rotate(calc(-66deg + var(--rotation-offset)));}
        .h{
            transform-origin: 50% 90%;
            transform:rotate(calc(-77deg + var(--rotation-offset)));}
        .i{
            transform-origin: 50% 90%;
            transform:rotate(calc(-88deg + var(--rotation-offset)));}
        .j{
            transform-origin: 50% 90%;
            transform:rotate(calc(-99deg + var(--rotation-offset)));}
        .k{
            transform-origin: 50% 90%;
            transform:rotate(calc(-110deg + var(--rotation-offset)));}

    </style>
</head>

<body>
    <div class=paper>
        <div class="spanbone a">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>大江东去</div>
        </div>
        <div class="spanbone b">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>浪淘尽</div>
        </div>
        <div class="spanbone c">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>千古风流人物</div>
        </div>
        <div class="spanbone d">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>故垒西边</div>
        </div>
        <div class="spanbone e">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>人道是</div>
        </div>
        <div class="spanbone f">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>三国周郎赤壁</div>
        </div>
        <div class="spanbone g">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>乱石穿空</div>
        </div>
        <div class="spanbone h">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>惊涛拍岸</div>
        </div>
        <div class="spanbone i">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>卷起千堆雪</div>
        </div>
        <div class="spanbone j">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>江山如画</div>
        </div>
        <div class="spanbone k">
            <div class=woodstick></div>
            <div class=boneupper></div>
            <div class=text>一时多少豪杰</div>
        </div>
</body>

</html>